<!--
 * @Descripttion: js
 * @Version: 1.0
 * @Author: name
 * @Date: 2021-03-03 20:03:20
 * @LastEditors: name
 * @LastEditTime: 2021-03-03 20:12:17
-->
<template>
  <div class="address-list-page">
    <van-nav-bar title="地址列表"
                 left-text="返回"
                 left-arrow
                 @click-left="onClickLeft" />
    <van-address-list v-model="state.chosenAddressId"
                      :list="state.list"
                      default-tag-text="默认"
                      @add="onAdd"
                      @edit="onEdit" />
  </div>
</template>

<script>
import { reactive } from "vue";
import { useRouter } from "vue-router";
export default {
  name: "AddressList",
  setup () {
    const { go, push } = useRouter();
    const state = reactive({
      chosenAddressId: 0,
      list: [
        {
          id: "1",
          name: "张三",
          tel: "13000000000",
          address: "浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室",
          isDefault: true,
        },
        {
          id: "2",
          name: "李四",
          tel: "1310000000",
          address: "浙江省杭州市拱墅区莫干山路 50 号",
        },
      ],
    });
    const onClickLeft = () => {
      go(-1);
    };
    const onAdd = () => {
      push("/user/address/update");
    };
    const onEdit = (val) => {
      push({ path: "/user/address/update", query: val });
    };
    return {
      state,
      onClickLeft,
      onAdd,
      onEdit,
    };
  },
};
</script>
<style lang="less" scoped>
.address-list-page {
  .van-nav-bar {
    ::v-deep(.van-icon),
    ::v-deep(.van-nav-bar__text) {
      color: #333;
    }
  }
}
</style>